<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/repetition.css">
    <link rel="stylesheet" href="css/css4.css">
</head>
<body>
    <div class="all"></div>
    <div class="top">
        <div class="container">
            <div class="logo">
                <img src="img/a1.png" alt="">
                <span>悦读 FM</span>
            </div>
            <ul class="menu">
                <li>悦读</li>
                <li>情感</li>
                <li>连播</li>
                <li>校园</li>
                <li>音乐</li>
                <li>Labs</li>
            </ul>     
            <div class="mine">
                <input type="text" class="mine-input">
                <img src="img/a2.png" alt="">
                <span>
                    <img src="img/a18.png" alt="">
                </span>
                <div class="mine-d1">
                    <span>雨住一∨</span>
                    <ol class="clearfix mine-d2">
                        <li>个人主页</li>
                        <li>设置</li>
                        <li>退出</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="container">
            <p>设置个人信息</p>
            <ol class="new clearfix">
                <li class="li" id="l1" value="0">基本信息
                    <div class="n1"></div>
                </li>
                <li class="li" id="l2" value="1">设置头像/头图
                    <div class="n2"></div>
                </li>
                <li class="li" value="2">修改密码
                    <div class="n3"></div>
                </li>
            </ol>
             <form action="" class="form1 form0">
                <ol class="con">
                    <li class="con1">
                        <label for="necheng">呢称</label>
                        <input type="text" id="necheng">
                    </li>
                    <li class="con1 con1-2">
                        <label for="userword">邮箱</label>
                        <input type="text" id="userword">
                    </li>
                    <li class="con1 con1-3">
                        <label for="select">性别</label>
                        <select id="select">
                            <option value="2" class="option">&nbsp;&nbsp;&nbsp;&nbsp;其他</option>
                            <option value="1" >&nbsp;&nbsp;&nbsp;&nbsp;男</option>
                            <option value="0" >&nbsp;&nbsp;&nbsp;&nbsp;女</option>
                        </select>
                    </li>
                    <li class="con1 con1-4">
                        <label for="select2">现居</label>
                        <select id="select2">
                            <option value="2" class="option">&nbsp;&nbsp;&nbsp;&nbsp;请选择</option>
                            <option value="1" >&nbsp;&nbsp;&nbsp;&nbsp;河南</option>
                            <option value="0" >&nbsp;&nbsp;&nbsp;&nbsp;北京</option>
                            <option value="0" >&nbsp;&nbsp;&nbsp;&nbsp;上海</option>
                        </select>
                        <select name="" id="select3">

                        </select>
                    </li>
                    <li class="con2">
                        <div>
                            <label for="sina"><img src="img/d3.png" alt=""></label>
                        </div>
                        <input type="text" placeholder="    http://" id="sina">
                    </li>
                    <li class="con2">
                        <div>
                            <label for="dou"><img src="img/d4.png" alt=""></label>
                        </div>
                        <input type="text" placeholder="    http://" id="dou">
                    </li>
                    <li class="con2">
                        <div>
                            <label for="kon"><img src="img/d5.png" alt=""></label>
                        </div>
                        <input type="text" placeholder="    http://" id="kon">
                    </li>
                    <li class="con3">
                        填写对应社区个人主页url地址之后，相关信息将会在你的悦读FM个人主页展示。
                    </li>
                    <li class="con4">
                        <label for="qianming"> 一句话签名</label>
                        <input type="text" placeholder="    限制30个英文字符或15个汉字" id="qianming">
                    </li>
                    <li class="con5">
                        <button>保存</button>
                    </li>
                </ol>
            </form> 
            <form action="" class="form2 form0">
                <div class="fo1">头像
                    <input type="file" accept="application/msword">
                    <img src="img/a26.png" alt="">
                </div>
                <div class="fo2">
                    头像大小建议200x200像素，jpg格式图片，文件大小控制在50k以内。
                </div>
                <div class="fo3">头图
                    <ol>
                        <li>
                            <img src="img/d6.png" alt="" class="li2">
                        </li>
                        <li>
                            <img src="img/d7.png" alt="" class="li2">
                        </li>
                        <li>
                            <img src="img/d8.png" alt="" class="li2">
                        </li>
                        <li>
                            <img src="img/d9.png" alt="" class="li2">
                        </li>
                        <li>
                            <img src="img/d6.png" alt="" class="li2">
                        </li>
                        <li>
                            <img src="img/d7.png" alt="" class="li2">
                        </li>
                        <li>
                            <img src="img/d8.png" alt="" class="li2">
                        </li>
                        <li>
                            <img src="img/d9.png" alt="" class="li2">
                        </li>
                        <li>
                            <img src="img/d6.png" alt="" class="li2">
                        </li>
                        <li>
                            <img src="img/d7.png" alt="" class="li2">
                        </li>
                        <li>
                            <img src="img/d8.png" alt="" class="li2">
                        </li>
                        <li>
                            <img src="img/d9.png" alt="" class="li2">
                        </li>
                        <li>
                            <img src="img/d6.png" alt="" class="li2">
                        </li>
                        <li>
                            <img src="img/d7.png" alt="" class="li2">
                        </li>
                        <li>
                            <img src="img/d8.png" alt="" class="li2">
                        </li>
                        <li>
                            <img src="img/d9.png" alt="" class="li2">
                        </li>
                        <li>
                            <img src="img/d6.png" alt="" class="li2">
                        </li>
                        <li>
                            <img src="img/d7.png" alt="" class="li2">
                        </li>
                        <li>
                            <img src="img/d8.png" alt="" class="li2">
                        </li>
                        <li>
                            <img src="img/d9.png" alt="" class="li2">
                        </li>
                        <li>
                            <img src="img/d6.png" alt="" class="li2">
                        </li>
                        <li>
                            <img src="img/d7.png" alt="" class="li2">
                        </li>
                        <li>
                            <img src="img/d8.png" alt="" class="li2">
                        </li>
                        <li>
                            <img src="img/d9.png" alt="" class="li2">
                        </li>
                    </ol>
                </div>
                <div class="fo4">
                    <button>保存</button>
                </div>
            </form>
            <form action="" class="form3 form0">
                <ol class="pass">
                    <li class="pass1">旧密码
                        <input type="password">
                    </li>
                    <li class="pass1">新密码
                        <input type="password">
                    </li>
                    <li class="pass1 pass2">确定新密码
                        <input type="password">
                    </li>
                </ol>
                <div class="pass3">
                    <button>提交</button>
                </div>
            </form>
        </div>
    </div>
    <div class="bott">
            <div class="bottom container clearfix">
                <div class="bottom-left">
                    <div class="bot1">
                        <span>关于我们</span>
                        <div></div>
                        <span>加入我们</span>
                    </div>
                    <div class="bot2">
                        © 2010-2016 Yuedu.fm All rights reserved   粤ICP备14076392号
                    </div>
                </div>
                <div class="bottom-right">
                    <div>
                        <span class="br1">
                            <img src="img/a15.png" alt="" class="im1">
                            <img src="img/b12.png" alt="" class="im2 im3">
                        </span>
                        <span class="br1">
                            <img src="img/a16.png" alt="" class="im1">
                            <img src="img/b13.png" alt="" class="im2 im4">
                        </span>
                        <span class="br1">
                            <img src="img/b15.png" alt="" class="im1">
                            <img src="img/b16.png" alt="" class="im2 im5">
                        </span>
                    </div>
                </div>
            </div>
        </div>
    <script src="js/js4.js"></script>
</body>
</html>